<script setup lang="ts">
const props: any = defineProps<{
    ujt: any;
    id?: any;
}>();
const { $global } = props.ujt;
function closePop() {
    if (
        $global.pop[props.id]?.closepop &&
        typeof $global.pop[props.id].closepop === 'function'
    ) {
        $global.pop[props.id].closepop();
    } else {
        $global.pop[props.id].stat = 0;
    }
}
</script>

<template>
    <div class="as-pop-bar">
        <AsSvg
            v-if="$global.pop[props.id].ico"
            color="var(--ch8)"
            height="var(--fs4)"
            :src="$global.pop[props.id].ico"
        ></AsSvg>
        {{ $global.pop[props.id].tit || '' }}
    </div>
    <div class="as-pop-opts" v-if="!$global.pop[props.id]?.noclose">
        <div @pointerdown.stop.prevent="closePop()">&times;</div>
    </div>
</template>

<style scoped lang="scss">
.as-pop-bar {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 12px;
    letter-spacing: 2px;
    font-weight: bold;
    cursor: move;
    > .as-icon {
        margin-right: 12px;
    }
}
.as-pop-opts {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10 6px;
    > div {
        cursor: pointer;
        display: inline-block;
        padding: 0 6px;
    }
}
</style>
